<template>
  <div class="contain">
    <div class="header">
      <div class="title">
        <div class="titleName">消息</div>
        <div class="create">创建聊天</div>
      </div>

      <div class="message">
        <div class="messgaeItem">
          <div class="picture first">
            <img src="../assets/Liked.png" alt="">
          </div>
          <div class="message-title">赞和收藏</div>
        </div>

        <div class="messgaeItem">
          <div class="picture second">
            <img src="../assets/yhu.png" alt="">
          </div>
          <div class="message-title">新增关注</div>
        </div>

        <div class="messgaeItem">
          <div class="picture third">
            <img src="../assets/plun.png" alt="">
          </div>
          <div class="message-title">评论和@</div>
        </div>
      </div>
    </div>

    <div class="messageList">
      <div class="message-detail">
        <div class="leftContent">
          <img src="../assets/plun.png" alt="">
        </div>
        <div class="rightContent">
          <div class="topContent">消息通知<p class="date">2022-4-1</p></div>
          <p class="bottomContent">来和薯队长聊聊吧！3-5分钟，有机会赢够物卡哦~</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  
}
</script>

<style scoped>
.header{
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}
.title{
  align-items: flex-end;
  justify-content: center;
  display: flex;
}
.titleName{
  letter-spacing: 1px;
}
.create{
  position: absolute;
  right: 10px;
  font-size: 13px;
}
.message{
  box-sizing: border-box;
  margin-top: 30px;
  padding: 0 30px;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
}
.messgaeItem{
  width: 78px;
  height: 100%;
  text-align: center;
}
.picture{
  width: 45px;
  height: 45px;
  margin-left: 19px;
  border-radius: 12px;
}
.picture.first{
  background: rgb(241, 187, 187);

}
.picture.second{
  background: rgb(204, 212, 250);

}
.picture.third{
  background: rgb(212, 255, 237);
}
.picture img{
  margin-top: 5px;
  width: 70%;
}

.message-title{
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: bold;
}

.messageList{
  width: 100%;
  padding: 0px 10px;
  box-sizing: border-box;

}

.message-detail{
  width: 100%;
  height: 50px;
  display: flex;
}
.leftContent{
  width: 50px;
  height: 50px;
  background-color: rgb(212, 251, 236);
  border-radius: 50%;
  text-align: center;
}
.leftContent img{
  margin-top: 9px;

  width: 60%;
}
.rightContent{
  width: 80%;
  margin-left: 10px;
}
.topContent{
  font-size: 17px;
  margin: 5px 0;
  display: flex;
  justify-content: space-between;
}
.bottomContent{
  font-size: 15px;
  height: 24px;
  line-height: 24px;
  color: rgb(187, 188, 189);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.date{
  color: rgb(187, 188, 189);
  font-size: 13px;
}
</style>